<script setup lang="ts">
// 表单校验（账号名+密码）
import { ref } from 'vue'
import 'element-plus/theme-chalk/el-message.css'
import { useRouter } from 'vue-router'
import { UserStore } from "@/store";
let userStore = UserStore();
import { IUserStore } from '@/types/user'

import { login } from "@/api/user";

// 1. 准备表单对象
const form = ref({
    username: 'admin',
    password: 'admin',
    agree: true
})

// 2. 准备规则对象
const rules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur' },
    ],
    agree: [
        {
            validator: (rule, value, callback) => {
                console.log(value)
                // 自定义校验逻辑
                // 勾选就通过 不勾选就不通过
                if (value) {
                    callback()
                } else {
                    callback(new Error('请勾选协议'))
                }
            }
        }
    ]
}

// 3. 获取form实例做统一校验
const formRef = ref(null)
const router = useRouter()
const doLogin = () => {
    const { username, password } = form.value;
    login(username, password).then(res => {
        if (res.status == 200) {
            userStore.$patch((state: IUserStore) => {
                state.username = res.data.username;
                state.role = res.data.role;
                state.token = res.data.token;
                localStorage.setItem('Authorization', res.data.token)
            });
        }
        router.push({ path: '/layout/person' })
    })
    //   // 调用实例方法
    //   formRef.value.validate(async (valid) => {
    //     // valid: 所有表单都通过校验  才为true
    //     console.log(valid)
    //     // 以valid做为判断条件 如果通过校验才执行登录逻辑
    //     if (valid) {
    //       // TODO LOGIN
    //       await userStore.getUserInfo({ username, password })
    //       // 1. 提示用户
    //       ElMessage({ type: 'success', message: '登录成功' })
    //       // 2. 跳转首页
    //       router.replace({ path: '/' })
    //     }
    //   })
}

// 1. 用户名和密码 只需要通过简单的配置（看文档的方式 - 复杂功能通过多个不同组件拆解）
// 2. 同意协议  自定义规则  validator:(rule,value,callback)=>{}
// 3. 统一校验  通过调用form实例的方法 validate -> true
</script>


<template>
    <section class="login-section">
        <div class="wrapper">
            <nav>
                <h2>vue3-element-admin</h2>
                <p>欢迎使用，请先登录</p>
            </nav>
            <div class="username-box">
                <div class="form">
                    <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="60px"
                        status-icon>
                        <el-form-item prop="username" label="账户">
                            <el-input v-model="form.username" />
                        </el-form-item>
                        <el-form-item prop="password" label="密码">
                            <el-input v-model="form.password" />
                        </el-form-item>
                        <el-form-item prop="agree" label-width="22px">
                            <el-checkbox size="large" v-model="form.agree">
                                我已同意隐私条款和服务条款
                            </el-checkbox>
                        </el-form-item>
                        <el-button type="primary" class="subBtn" @click="doLogin">登 录</el-button>
                    </el-form>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped lang='scss'>
.login-section {
    margin: auto;
    background: url('@/assets/bg.svg') no-repeat center / cover;
    background-size: 100% 100%;
    height: 100vh;
    position: relative;

    .wrapper {
        width: 380px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);

        nav {
            height: 105px;
            margin-bottom: 20px;
            border-bottom: 1px solid #f5f5f5;
            text-align: center;

            h2 {
                margin: auto;
            }

            p {
                margin-top: 25px;
                font-size: 15px;
            }
        }

        .form {
            text-align: center;
        }

        .subBtn {
            margin-top: 10px;
        }
    }
}
</style>